<script>

// 引入 vue3 的响应式和生命周期方法
import { ref, onMounted } from 'vue'
// 引入 vue-router 的路由方法
import { useRouter } from 'vue-router'
// 引入 Element Plus 的消息弹窗组件
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入 Element Plus 的下拉箭头图标
import { ArrowDown } from '@element-plus/icons-vue'

export default {
  name: "Header",
  props: {
    icon: String
  },
  setup(props, { emit }) {

    // 获取路由实例
    const router = useRouter()
    // 获取当前用户信息（从 sessionStorage）
    const user = ref(JSON.parse(sessionStorage.getItem('CurUser')))


    // 跳转到个人中心页面
    const toUser = () => {
      console.log('to_user')
      router.push("/Home")
    }


    // 退出登录，弹窗确认
    const logout = () => {
      console.log('logout')
      ElMessageBox.confirm('您确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        center: true
      })
        .then(() => {
          ElMessage({
            type: 'success',
            message: '退出登录成功'
          })
          router.push("/")
          sessionStorage.clear()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消退出登录'
          })
        })
    }


    // 侧边栏收起/展开事件
    const collapse = () => {
      emit('doCollapse')
    }


    // 组件挂载后默认跳转到首页
    onMounted(() => {
      router.push("/Home")
    })

    return {
      user,
      toUser,
      logout,
      collapse,
      ArrowDown
    }
  }
}
</script>

<template>
  <!-- 顶部栏布局 -->
  <div style="display: flex;line-height: 60px;">
    <!-- 左侧收起/展开按钮 -->
    <div style="margin-top: 8px;">
      <i :class="icon" style="font-size: 20px;cursor: pointer;" @click="collapse"></i>
    </div>
    <!-- 中间标题 -->
    <div style="flex: 1;text-align: center;font-size: 34px;">
      <span>欢迎来到仓库管理系统</span>
    </div>
    <!-- 右侧用户下拉菜单 -->
    <div style="display: flex; align-items: center;">
      <el-dropdown>
        <span style="display: flex; align-items: center;">
          {{ user.name }}
          <el-icon style="margin-left: 4px;"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>



<style scoped></style>
